<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Graph</title>

  <style type="text/css" id="demo-css">
    BODY, HTML
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .Basis-Graph
    {
      float: left;
      margin-right: 2em;
    }

    .Basis-CheckGroup LABEL
    {
      display: block;
      margin-bottom: 0.5em;
    }
    .Basis-CheckGroup LABEL INPUT
    {
      margin-left: 0;
    }


    .Basis-Field-Title
    {
      font-weight: bold;
      margin-bottom: 0.5em;
    }

    .selectionContainer
    {                 
      float: left;

      font-size: 75%;
    }

  </style>

  <script type="text/javascript" src="../../basis-all.js"></script>
  <script type="text/javascript" src="../../locale/ru/calendar.js"></script>
  <script type="text/javascript" src="../../src/basis/ui/graph.js"></script>

  <script type="text/javascript" src="../seedrandom.js"></script>
  <script type="text/javascript" src="../demo.js"></script>

  <!--[if lt IE 9]>
  <script type="text/javascript" src="../../src/basis/ext/flashcanvas.js"></script>
  <![endif]-->

</head>

<body>
  <h1>Basis Demos: Graph</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">

    var DOM = basis.dom;
    var nsEntity = basis.entity;
    var LinearGraph = basis.ui.graph.LinearGraph;

    var nsForm = basis.ui.form;

    //
    // Example
    //

    var Company = new nsEntity.EntityType({
      name: 'Company',
      fields: {
        Id: nsEntity.StringId,
        Title: String
      }
    });

    var CompanyReport = new nsEntity.EntityType({
      name: 'CompanyReport',
      fields: {
        Date: String,
        Company: Company,
        Amount: Number
      },
      aliases: {
        CompanyId: 'Company'
      },
      groupings: {
        Company: Function.getter('data.Company')
      }
    });

    var companies = [
      { Id: 'apple', Title: 'Apple' },
      { Id: 'intel', Title: 'Intel' },
      { Id: 'google', Title: 'Google' },
      { Id: 'microsoft', Title: 'Microsoft' },
      { Id: 'oracle', Title: 'Oracle' }
    ].map(Company);

    var data = [];
    var lastValue;
    var value;

    Math.seedrandom("graph");

    var min = 100000;
    var max = 5000000;
    for (var i = 0, company; company = companies[i]; i++)
    {
      lastValue = (max - min) * Math.random() + min; // 100 000 - 5 000 000
      
      for (var month = 0; month < 120; month++)
      {
        value = lastValue + 0.2 * lastValue * (2 * Math.random() - 1); // +/- 20% from last value;
                         
        data.push({
          Company: company,
          Date: (2011 + Math.floor(month / 12)) + '-' + (1 + month % 12).lead(2),
          Amount: value
        });

        lastValue = value;
      }
    }
    CompanyReport.all.sync(data);

    var graphCompanies = new nsEntity.EntitySet({ wrapper: Company });

    /*new LinearGraph({
      container: DOM.get('demo-container'),
      width: 800,
      height: 450,

      propGetter: function(object){
        var date = new Date(object.data.Date);
        return basis.locale['ui.calendar'].MONTH.SHORT[date.getMonth()].toLowerCase() + ' ' + date.getFullYear();
      },
      
      dataSource: graphCompanies,
      childClass: {
        dataSourceGetter: function(object){
          return CompanyReport.getGrouping('Company').getSubset(object.target);
        },
        legendGetter: function(object){
          return object.data.Title;
        },
        valueGetter: Function.getter('data.Amount'),
        sorting: Function.getter('data.Date')
      }
    });*/

    var graph = new LinearGraph({
      container: DOM.get('demo-container'),
      width: 800,
      height: 450,

      selection: true,

      dataSource: CompanyReport.getGrouping('Company').getSubset(Company('microsoft')),
      sorting: Function.getter('data.Date'),
      keyGetter: function(object){
        return object.data.Date;
      },
      keyTitleGetter: function(object){
        var date = new Date(object.data.Date);
        return basis.locale['ui.calendar'].MONTH.SHORT[date.getMonth()].toLowerCase() + ' ' + date.getFullYear();
      },

      series: {
        dataSource: graphCompanies,
        childClass: {
          sourceGetter: function(object){
            return CompanyReport.getGrouping('Company').getSubset(object.target);
          },
          legendGetter: function(object){
            return object.data.Title;
          },
          keyGetter: Function.getter('data.Date'),
          valueGetter: Function.getter('data.Amount')
        }
      }
    });

    new nsForm.CheckGroup({
      container: DOM.get('demo-container'),
      title: 'Companies:',
      dataSource: Company.all,
      value: ['apple', 'microsoft'],
      childClass: {
        valueGetter: Function.getter('data.Id'),
        titleGetter: Function.getter('data.Title')
      },
      handler: {
        change: function(){
          graphCompanies.set(this.getValue());
        }
      }
    });


    new basis.ui.Container({
      cssClassName: 'selectionContainer',
      container: DOM.get('demo-container'),
      dataSource: graph.selection,
      childClass: {
        template: 
          '<div>{title}</div>',

        binding: {
          title: {
            events: 'update',
            getter: function(){
              return (new Date(this.data.Date)).toFormat('%D.%M.%Y');
            }
          }
        }
      }
    })

  </script>
</body>

</html>